<template>
<div>
    <Header></Header>
    <div id="user">
        <div class="uc-top">
            <div class="uc-avatar">
                <img id="user-avatar" src="http://www.ketangpai.com/Public/Common/img/40/22.png" alt="张朝春" />
                <a href="javascript:;" class="change-avatar">更改头像</a>
                <div class="marks"></div>
            </div>
            <h1 class="uc-name">{{ username }}</h1>
            <p class="uc-subtit">
                <span class="jifentxt">当前积分：0 </span>
                <span class="viptxt"><a href="JavaScript:;">开通课堂派VIP</a></span>
            </p>
            <div class="s-header">
                <a href="javascript:;" class="active">个人资料</a>
                <a href="javascript:;">通知设置</a>
            </div>
        </div>
        <div class="uc-center">
            <div class="uc-basicInformation">
                <h3>基本资料</h3>
                <span>姓名：</span><label>{{ username }}</label>
                <button @click="changleSchool()">编辑资料</button>
                <br />
                <span>学校：</span><label>{{ school }}</label>
                <div v-bind:class="showSchool" id="showSchool">
                    <span>姓名：</span> <input type="text" v-model="username" />
                    <br />
                    <span>学校：</span> <input type="text" v-model="school" />
                    <button @click="cancle()">取消</button>
                    <button @click="sumbitChangleSchool()">确定</button>
                </div>
            </div>
            <div class="uc-roleIdentity">
                <h3>角色身份</h3>
                <span>角色：</span><label>{{ role }}</label>
                <button @click="changleRoles()">更变身份</button>
                <div v-bind:class="showRole" id="showRole">
                    <span>角色：</span>
                    <el-radio-group v-model="changleDataRole">
                        <el-radio label="学生"></el-radio>
                        <el-radio label="老师"></el-radio>
                    </el-radio-group>
                    <button @click="cancle()">取消</button>
                    <button @click="sumbitChangleRole()">确定</button>
                </div>
            </div>
            <div class="uc-accountSettings">
                <h3>账号设置</h3>
                <span>账号：</span><label>{{ username }}</label>
                <br />
                <span>邮箱：</span><label>{{ email }}</label>
                <button @click="changleEmail()">修改</button>
                <div v-bind:class="showEamil" id="showEmail">
                    <span>当前邮箱号：</span><label>{{ email }}</label>
                    <br />
                    <span>修改邮箱号：</span>
                    <el-input type="text" v-model="changleDataEmail" style="display: inline-block; width: 20% !important"></el-input>
                    <button @click="cancle()">取消</button>
                    <button @click="sumbitChangleEmail()">确定</button>
                </div>
                <br />
                <span>手机：</span><label>{{ tel }}</label>
                <button @click="changleTel()">修改</button>
                <div v-bind:class="showTel" id="showTel">
                    <span>当前手机号：</span><label>{{ tel }}</label>
                    <br />
                    <span>修改手机号：</span>
                    <el-input type="text" v-model="changleDataTel" style="display: inline-block; width: 20% !important"></el-input>
                    <button @click="cancle()">取消</button>
                    <button @click="sumbitChangleTel()">确定</button>
                </div>
            </div>
            <div class="uc-password">
                <h3>密码</h3>
                <span>密码：</span><input type="password" readonly v-model="password" />
                <button @click="changlePassword()">更换密码</button>
                <div v-bind:class="showPassword" id="showpassword">
                    <span>旧密码：</span>
                    <el-input type="password" v-model="checkPassword" style="display: inline-block; width: 20% !important"></el-input>
                    <span>新密码：</span>
                    <el-input type="password" v-model="changleDataPassword" style="display: inline-block; width: 20% !important"></el-input>
                    <button @click="cancle()">取消</button>
                    <button @click="sumbitChanglePassword()">确定</button>
                </div>
            </div>
            <div class="uc-otherAccount">
                <h3>第三方账号绑定</h3>
                <span>微信：</span><label>未绑定</label>
                <button>取消绑定</button>
            </div>
        </div>
    </div>
</div>
</template>

<style lang="scss" scoped>
$text-center: center;

#user {
    /*width: 1518px;*/
    width: 100%;
    margin: 0 auto;

    .uc-top {
        .uc-avatar {
            margin-top: 20px;

            img {
                width: 73px;
                height: 73px;
                margin-left: 720px;
            }

            .change-avatar {
                position: absolute;
                left: 50%;
                margin-top: 92px;
                top: 0px;
                bottom: 0;
                margin-left: -39px;
                border-radius: 50%;
                width: 73px;
                height: 73px;
                color: #fff;
                text-align: center;
                background: rgba(0, 0, 0, 0.3);
                line-height: 73px;
                opacity: 0;

                &:hover {
                    opacity: 1;
                    transition: all 0.5s ease;
                }
            }
        }

        .uc-name {
            text-align: $text-center;
        }

        .uc-subtit {
            text-align: $text-center;
            font-size: 14px;
            width: 350px;
            margin-left: 590px;
            padding: 5px 0px;
            background-color: #f2f2f2;

            span {
                display: inline-block;
                padding: 0 30px;
            }

            a {
                color: #4d90fe;
            }
        }

        .s-header {
            padding: 20px 500px;
            border: 1px solid #c5c1c1;
            border-left: none;
            border-right: none;

            a {
                display: inline-block;
                padding: 0 80px;

                &:first-of-type {
                    color: #4d90fe;
                }

                &:last-of-type {
                    color: gray;
                }
            }
        }
    }

    .uc-center {
        margin-top: 50px;
        margin-bottom: 50px;
        border-top: 1px solid #c5c1c1;
        border-bottom: 1px solid #c5c1c1;

        .uc-basicInformation,
        .uc-roleIdentity,
        .uc-accountSettings,
        .uc-password,
        .uc-otherAccount {
            margin: 20px 150px;

            h3 {
                font-size: 14px;
                border-bottom: 1px solid #c5c1c1;
                padding: 20px 0;
                line-height: 1px;
            }

            span {
                display: inline-block;
                padding: 10px 0;
                padding-right: 50px;
                color: #969696;
            }

            input {
                outline: none;
            }

            button {
                float: right;
                width: 70px;
                height: 30px;
                margin-left: 20px;
            }

            label {
                color: #595959;
                font-size: 14px;
            }

            button {
                cursor: pointer;
            }

            #showTel,
            #showEmail,
            #showSchool,
            #showPassword,
            #showRole {
                position: relative;
                top: -42px;
                background-color: white;
            }

            #showSchool {
                top: -82px;
            }

            .showChangleTel,
            .showChangleEmail,
            .showChangleSchool,
            .showChanglePassword,
            .showChangleRole {
                display: none;
            }
        }

        .uc-password {
            input {
                border: none;
            }
        }
    }
}
</style>

<script>
import Header from "../components/Header";
export default {
    components: { Header },
    data() {
        return {
            id: null,
            username: null,
            school: null,
            role: null,
            email: null,
            tel: null,
            password: null,
            checkPassword: null,
            showTel: {
                showChangleTel: true
            },
            showEamil: {
                showChangleEmail: true
            },
            showSchool: {
                showChangleSchool: true
            },
            showPassword: {
                showChanglePassword: true
            },
            showRole: {
                showChangleRole: true
            },
            changleDataTel: null,
            changleDataEmail: null,
            changleDataPassword: null,
            changleDataSchool: null,
            changleDataRole: null,
        };
    },
    methods: {
        showInformation: function () {
            this.$axios
                .get("http://localhost:8080/user/get_user_by_mail_or_tel", {
                    params: {
                        value: sessionStorage.getItem("username")
                    }
                })
                .then(response => {
                    this.id = response.data[0].id;
                    this.username = response.data[0].name;
                    this.school = response.data[0].school;
                    this.email = response.data[0].mail;
                    this.tel = response.data[0].tel;
                    this.password = response.data[0].password;
                    if (response.data[0].email === null) {
                        this.email = "未绑定";
                    }
                    if (response.data[0].tel === null) {
                        this.tel = "未绑定";
                    }
                    if (
                        response.data[0].role === "t" ||
                        response.data[0].role === "老师"
                    ) {
                        this.role = "老师";
                    } else {
                        this.role = "学生";
                    }
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        changleTel: function () {
            this.showTel.showChangleTel = false;
        },
        changleEmail: function () {
            this.showEamil.showChangleEmail = false;
        },
        changleSchool: function () {
            this.showSchool.showChangleSchool = false;
        },
        changlePassword: function () {
            this.showPassword.showChanglePassword = false;
        },
        changleRoles: function () {
            this.showRole.showChangleRole = false;
        },
        sumbitChangleEmail: function () {
            let email = new RegExp(
                "^([a-z0-9A-Z]+[-|.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?.)+[a-zA-Z]{2,}$"
            );
            if (!email.test(this.changleDataEmail)) {
                this.$message({ message: "输入邮箱不合法", type: "error" });
                return;
            }
            this.$axios
                .get("http://localhost:8080/user/change_mail", {
                    params: {
                        id: this.id,
                        mail: this.changleDataEmail
                    }
                })
                .then(response => {
                    sessionStorage.removeItem("username");
                    sessionStorage.setItem("username", this.changleDataEmail);
                    this.showInformation();
                    this.$message({ message: "修改邮箱成功", type: "success" });
                    console.log(response.data);
                    this.showEamil.showChangleEmail = true;
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });

        },
        sumbitChangleTel: function () {
            let tel = new RegExp(
                "^((13[0-9])|(17[0-9])|(15[^4,\\D])|(18[0,5-9]))\\d{8}$"
            );
            if (!tel.test(this.changleDataTel)) {
                this.$message({ message: "输入电话号码不合法", type: "error" });
                return;
            }
            this.$axios
                .get("http://localhost:8080/user/change_tel", {
                    params: {
                        id: this.id,
                        tel: this.changleDataTel
                    }
                })
                .then(response => {
                    sessionStorage.removeItem("username");
                    sessionStorage.setItem("username", this.changleDataTel);
                    this.showInformation();
                    this.$message({ message: "修改电话号码成功", type: "success" });
                    console.log(response.data);
                    this.showTel.showChangleTel = true;
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
        },
        sumbitChanglePassword: function () {
            if (this.password != this.checkPassword) {
                this.$message({ message: "输入的旧密码错误", type: "error" });
                return;
            }
            if (this.password === this.changleDataPassword) {
                this.$message({ message: "输入密码与旧密码一致", type: "error" });
                return;
            }
            this.$axios
                .get("http://localhost:8080/user/change_password", {
                    params: {
                        id: this.id,
                        password: this.changleDataPassword
                    }
                })
                .then(response => {
                    this.showInformation();
                    this.$message({ message: "修改密码成功", type: "success" });
                    console.log(response.data);
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
            this.showPassword.showChanglePassword = true;
        },
        sumbitChangleRole: function () {
            this.$axios
                .get("http://localhost:8080/user/change_role", {
                    params: {
                        id: this.id,
                        role: this.changleDataRole
                    }
                })
                .then(response => {
                    this.showInformation();
                    this.$message({ message: "修改角色成功", type: "success" });
                    console.log(response.data);
                })
                .catch(function (error) {
                    // 请求失败处理
                    console.log(error);
                });
            this.showRole.showChangleRole = true;
        },
        cancle: function () {
            this.showTel.showChangleTel = true;
            this.showEamil.showChangleEmail = true;
            this.showSchool.showChangleSchool = true;
            this.showPassword.showChanglePassword = true;
            this.showRole.showChangleRole = true;
        }
    },
    created() {
        this.showInformation();
        // 设置休眠时间
        function sleep(time) {
            return new Promise(resolve => setTimeout(resolve, time));
        }
        // 等待半秒后获取数据
        sleep(500).then(() => {
            this.showInformation();
        });
    }
};
</script>
